<template>
  <div class="center">
    <div style="margin-bottom:20px" class="flex flex_bet felx_align">
      <div style="font-size:22px">订单修改</div><el-button type="info" icon="el-icon-close" circle @click="closeButton"></el-button>
    </div>
    <div class="main">
      <header>产品信息</header>
      <div class="info">
        <ul class="flex flex-wrap">
          <li><span class="title">SN:</span><span class="vlaue">{{scheduleDate.sn_value}}</span></li>
          <li><span class="title">产品型号:</span><span class="vlaue">{{scheduleDate.product_model}}</span></li>
          <li><span class="title">故障类别:</span><span class="vlaue">{{scheduleDate.fault_type == 1 ? '显示异常' : scheduleDate.fault_type == 2 ? '触摸异常' : scheduleDate.fault_type == 3 ? '充电异常' : 
              scheduleDate.fault_type == 4 ? '摄像头异常' : scheduleDate.fault_type == 5 ? '喇叭异常' : scheduleDate.fault_type == 6 ? '耳机异常' : scheduleDate.fault_type == 7 ? '卡开机画面' : 
              scheduleDate.fault_type == 8 ? '无法开机' : scheduleDate.fault_type == 9 ? '客户误判' : '其他'}}</span></li>
          <li><span class="title">代理商:</span><span class="vlaue">{{scheduleDate.apUsername}}</span></li>
          <li><span class="title">是否需要分析报告:</span><span class="vlaue">{{scheduleDate.is_analyse == 1 ? '是' : '否'}}</span></li>
        </ul>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="main">
      <header>维修信息</header>
      <div class="info">
        <ul class="flex flex-wrap">
          <li><span class="title">当前状态:</span><span class="vlaue">{{scheduleDate.accept_type == 1 ? '待受理' : scheduleDate.accept_type == 2 ? '已受理' : '已完成' }}</span></li>
          <li><span class="title">创建时间:</span><span class="vlaue">{{Number(scheduleDate.create_time) | newDate}}</span></li>
          <li></li>
          <li><span class="title">物流公司 (寄):</span><span class="vlaue">{{scheduleDate.mail_express}}</span>
            <el-button type="text" style="padding:0" @click="amendName">修改</el-button>
          </li>
          <li><span class="title">物流单号 (寄):</span><span class="vlaue">{{scheduleDate.mail_order_no}}</span>
            <el-button type="text" style="padding:0" @click="amendValue">修改</el-button>
          </li>
          <li></li>
          <li><span class="title">售后类型:</span><span class="vlaue">{{scheduleDate.after_type == 1 ? '退货' : scheduleDate.after_type == 2 ? '换新' : scheduleDate.after_type == 3 ? '换良品' : 
              scheduleDate.after_type == 4 ? '保内维修' : scheduleDate.after_type == 5 ? '保外维修' : scheduleDate.after_type == 6 ? '原反' : '报废' }}</span></li>
          <li><span class="title">实际故障:</span><span class="vlaue">{{scheduleDate.phenomenon == 1 ? '显示异常' : scheduleDate.phenomenon == 2 ? '触摸异常' : scheduleDate.phenomenon == 3 ? '充电异常' : scheduleDate.phenomenon == 4 ? '摄像头异常' : scheduleDate.phenomenon == 5 ? '喇叭异常' : scheduleDate.phenomenon == 6 ? '耳机异常' : scheduleDate.phenomenon == 7 ? '开机画面卡' : 
              scheduleDate.phenomenon == 8 ? '无法开机': scheduleDate.phenomenon == 9 ? '客户误判' : '其他' }}</span></li>
          <li><span class="title">实际故障描述:</span><span class="vlaue">{{scheduleDate.phenomenon_remark}}</span></li>
        </ul>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="main">
      <header>收件信息</header>
      <div class="info">
        <ul class="flex flex-wrap">
          <li><span class="title">收件人:</span><span class="vlaue">{{scheduleDate.contact_person}}</span></li>
          <li><span class="title">收件人地址:</span><span class="vlaue">{{scheduleDate.contact_address}}</span></li>
          <li><span class="title">收件人电话号码:</span><span class="vlaue">{{scheduleDate.contact_phone}}</span></li>
          <li><span class="title">物流公司(返):</span><span class="vlaue">{{scheduleDate.return_express ? scheduleDate.return_express : '--'}}</span></li>
          <li><span class="title">物流单号(返):</span><span class="vlaue">{{scheduleDate.return_express_order ? scheduleDate.return_express_order : '--'}}</span></li>
        </ul>
      </div>
    </div>
    <el-dialog :title="expressCut ? '物流公司' : '物流单号'" :visible.sync="scheduleDialog" width="35%">
      <el-form>
        <div v-if="expressCut">
          <el-form-item label="物流公司" label-width="140px" prop="ota_demand">
            <el-input v-model="addForm.mail_express" autocomplete="off" placeholder="请输入物流公司" class="add_select"></el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="物流单号" label-width="140px" prop="ota_demand">
            <el-input v-model="addForm.mail_order_no" autocomplete="off" placeholder="请输入物流公司" class="add_select"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="scheduleDialog = false">取 消</el-button>
        <el-button type="primary" @click="getupdateExpress">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryReturnAfterSales, updateExpress } from "@/api/aftersale.js";
export default {
  props: {
    scheduleId: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      scheduleDate: {},
      addForm: { type: 1, mail_express: '', mail_order_no: '', id: 0 },
      scheduleDialog: false,
      expressCut: false
    }
  },
  created() {
    this.getqueryReturnAfterSales(this.scheduleId)
  },
  methods: {
    closeButton() {
      this.$emit('closeSchedule')
    },
    getqueryReturnAfterSales(id) {
      queryReturnAfterSales({ id: id }).then(({ data }) => {
        this.scheduleDate = data
        console.log('成功', data)
      }).catch(err => {
        this.scheduleDate = {}
        console.log('失败', err)
      })
    },
    //修改物流公司
    amendName() {
      this.scheduleDialog = true
      this.expressCut = true
    },
    //修改单号
    amendValue() {
      this.scheduleDialog = true
      this.expressCut = false
    },
    //修改快递或者快递单号
    getupdateExpress() {
      this.addForm.id = this.scheduleId
      if (this.expressCut) {
        this.addForm.type = 1
        this.addForm.mail_order_no = ''
      } else {
        this.addForm.type = 2
        this.addForm.mail_express = ''
      }
      console.log('参数', this.addForm)
      updateExpress(this.addForm).then(res => {
        this.$message.success(res.msg)
        this.getqueryReturnAfterSales(this.scheduleId)
        this.scheduleDialog = false
      }).catch(err => {

      })
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  .info {
    ul {
      font-size: 14px;
      li {
        width: 33%;
        margin-top: 20px;
        .title {
          margin-right: 10px;
        }
        .vlaue {
          color: #575858;
          display: inline-block;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>